
<!--
基于vant 安装并引入
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);


app中合适的位置放上
<router-view name="tabBar" />

路由route对象中的components
components:{
      default:Home,
      tabBar: TabBar
} 
-->
<template>
    <van-tabbar v-model="active" route @change="select(active)" active-color="orange">
      <van-tabbar-item 
        v-for="(item, index) in tabbarList" :key="index"
        :icon="item.icon" 
        replace
        :to="item.path"
        >
        {{item.name}}
      </van-tabbar-item>
    </van-tabbar>
</template>

<script>
export default {
    data() {
        return {
          active: 0,
          tabbarList:[
            { name:"首页", icon:"home-o", path:"/" },
            { name:"课程", icon:"bar-chart-o", path:"/course" },
            { name:"课程记录", icon:"orders-o", path:"/courseDate" },
            { name:"练习", icon:"edit", path:"/exercise" },
            { name:"我的", icon:"contact", path:"/mine" },
          ]
        }
    },
    methods:{
      select(data){
        // console.log(data)
      }
    }
}
</script>

<style lang="scss" scoped>

</style>


<!--info 图标上的数值  -->
<!--dot 图标上的小圆点  

active-color	选中标签的颜色	string	#1989fa	-
inactive-color	未选中标签的颜色	string	#7d7e80	-

url	点击后跳转的链接地址	string	-	-
to	点击后跳转的目标路由对象，同 vue-router 的 to 属性	string | object	-	-
replace	是否在跳转时替换当前页面历史	boolean	false	-

事件
change	切换标签时触发	active: 当前选中标签的名称或索引值
-->